<template>
	<base-loading-box
		:isEmpty="isEmpty"
		:loading="loading"
		:error="error"
		:emptyImg="emptyImg"
		@reload="emits('reload')">
		<table
			class="min-w-full w-full table-fixed border-separate border-spacing-y-[6px] text-left"
			:class="tableClass">
			<thead class="h-9 text-t-2">
				<tr>
					<th
						v-for="(item, index) in options"
						:key="index"
						class="h-9 whitespace text-sm"
						:class="{
							'pl-[10px]': index === 0,
							'pl-3': index !== 0,
							'pr-5': index === options.length - 1
						}"
						:style="{ width: item?.width, textAlign: item?.align, verticalAlign: 'middle' }">
						<base-text :text="item.text" :text-t="item.textT"></base-text>
					</th>
				</tr>
			</thead>
			<transition-group
				class="text-t-1"
				tag="tbody"
				:css="false"
				@beforeEnter="beforeEnter"
				v-if="!isEmpty"
				@beforeLeave="beforeLeave">
				<tr
					v-for="(item, index) in data"
					:key="idKey ? (item as any)[idKey] || index : index"
					class="h-13 rounded-sm bg-bg-1 text-t-3 mb-2 shadow-md transition-all ease-linear"
					:class="trClass">
					<td
						v-for="(option, index) in options"
						:key="index"
						class="overflow-hidden"
						:class="{
							'rounded-l-sm pl-[10px]': index === 0,
							'pl-3': index !== 0,
							'rounded-r-sm pr-5': index === options.length - 1
						}"
						:style="{
							width: options[index]?.width,
							textAlign: options[index]?.align,
							verticalAlign: 'middle'
						}">
						<div v-if="option.slot">
							<slot :name="option.slot" :data="item"></slot>
						</div>

						<div v-else-if="option.type === 'game' && option.prop">
							<up-game
								:data="item"
								:value="item[option.prop]"
								:src="item[option.prop]['gameIcon']"
								:class="option.class"
								v-bind="option.attrs"></up-game>
						</div>
						<div v-else-if="option.prop === 'orderId'">
							<up-order-id :value="item.orderId" :data="item"></up-order-id>
						</div>
						<div v-else-if="option.type === 'user'">
							<up-user :value="item.user"></up-user>
						</div>
						<div v-else-if="option.type === 'date' && option.prop">
							<up-date :value="item.createAt" :dateFormat="option.dateFormat"></up-date>
						</div>
						<div v-else-if="option.type === 'currency' && option.prop">
							<up-currency
								:value="item[option.prop]"
								:hoverValue="item[option.hoverProp as string]"
								:currency="item.currency"
								:class="option.class"
								:class1="option.class"
								v-bind="option.attrs"></up-currency>
						</div>
						<div v-else-if="option.type === 'amount' && option.prop">
							<up-amount
								:value="item[option.prop]"
								:class="option.class"
								:currency="item.currency"
								v-bind="option.attrs"></up-amount>
						</div>
						<div v-else-if="option.type === 'multiplier' && option.prop">
							<up-multiplier
								:value="item"
								:class="option.class"
								v-bind="option.attrs"></up-multiplier>
						</div>
						<div v-else-if="option.type === 'payout'">
							<up-payout
								:value="item"
								:class="option.class"
								:currency="item.currency"
								v-bind="option.attrs"></up-payout>
						</div>
						<div v-else-if="option.type === 'space'"></div>
						<div v-else>
							{{ option.prop ? (item as any)[option.prop] : '' }}
						</div>
					</td>
				</tr>
			</transition-group>
		</table>
	</base-loading-box>
</template>

<script setup lang="ts">
import gsap from 'gsap'
import { BaseText, BaseLoadingBox } from '@/components/base'
import {
	UpAmount,
	UpMultiplier,
	UpGame,
	UpCurrency,
	UpPayout,
	UpDate,
	UpUser,
	UpOrderId
} from '@/components/up'
import { TableOptions } from './types'
import { watch } from 'vue'
const props = defineProps({
	options: {
		type: Array<TableOptions>,
		default: () => []
	},
	data: {
		type: Array<any>,
		default: () => []
	},
	idKey: {
		type: String,
		default: ''
	},
	loading: {
		type: Boolean
	},
	isFinish: {
		type: Boolean,
		default: false
	},
	isEmpty: {
		type: Boolean,
		default: false
	},
	error: {
		type: Object,
		default: null
	},
	moreText: {
		type: String,
		default: ''
	},
	emptyImg: {
		type: String
	},
	tableClass: {
		type: [String, Array, Object]
	},
	trClass: {
		type: [String, Array, Object]
	}
})
const emits = defineEmits(['load', 'reload'])

const beforeEnter = (el: any) => gsap.fromTo(el, { opacity: 0 }, { opacity: 1 })
const beforeLeave = (el: any) => gsap.fromTo(el, { opacity: 1 }, { opacity: 0 })

watch(
	() => [props.data],
	() => {}
)
</script>

<style scoped>
.up-table-container :deep(.empty-state) {
	position: relative;
	top: 120px;
	left: 0;
	right: 0;
}
</style>
